<template>
  <div class="findpassword">
    <wxc-minibar title="找回密码" >
    </wxc-minibar>

    <div class="title">
		<text style="font-family: PingFangSC-Medium;font-size: 28px;color: #666666;">短信验证，以确保本人操作</text>
    </div>

	<div class="phone">
		<div class="phone_fl">
			<text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">手机号</text>
		</div>
		<div class="phone_fr">
			<text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">********{{ phoneNumber.substr(-4)}}</text>
		</div>
	</div>
	 
	<div class="code">
        <div class="code_fl">
			<text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">验证码</text>
        </div>
        <div class="code_md">
			<input class="code-input"  type="number" v-model="code" maxlength="6" placeholder="填写验证码">
        </div>
        <div class="code_fr">
			<button class="codeBtn" v-if="!disabled"  slot="button"><text style="font-size: 28px;color: #333333;" class="code-text">{{t}}s后获取</text></button>
			<button class="codeBtn" v-if="disabled"  slot="button" @click="takeCode"><text style="font-size: 28px;color: #333333;" class="code-text">获取验证码</text></button>
        </div>
	</div>

	<div class="button_box">
		<div class="button" @click="validatesubmit">
			<text style="font-family: PingFangSC-Medium;font-size: 32px;color: #FFFFFF;">验证</text>
		</div>
	</div>

	<wxc-mask :show="alertCode" width="320" height="80" mask-bg-color="#333" :has-overlay="false"> 
		<div class="tip"><text class="tip-font">{{ content }}</text></div>
	</wxc-mask>
</div>
</template>

<script>
import { WxcMask } from 'weex-ui'
import { customResponse, postResponsesToken } from '@/api.js'
import { getBaseUrl, serialize}  from "@/utils/index.js"
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"

let navigator = weex.requireModule('navigator')
const storage = weex.requireModule('storage')
export default {
	data() {
		return {
			alertCode:false,
			content:'',
			timeflag: true,
			code:'',
			type: 1,  //1 校验密码  2 修改密码
			phoneNumber:'',
			checkTimer: 0,
			showtitle: '获取验证码',
			accountId:'',
			disabled: true,
			t: 60,
			baseURL:''
		};
	},

	components:{
		WxcMask,
		WxcMinibar
	},

	created() {

		this.getItem('personalDetails').then( (value) => {
			this.cacheDate = JSON.parse(value)

			let { mobile } = this.cacheDate

			this.phoneNumber = mobile

		})
				
		this.baseURL = getBaseUrl(weex.config.bundleUrl, true)
	},

	methods: {
		alert(title, msg) {
			this.alertCode = true
			this.content= title
			setTimeout(()=>{
				this.alertCode = false
			},2000)
		},
	
		// 获取缓存指定数据
		getItem (name) {
			return new Promise((resolve, reject)=>{
				storage.getItem(name, event => {
					if (event.result === "success") {
						resolve(event.data);
					} else {
						reject('获取定位失败')
					}
				})
			})
		},
			
		async validatesubmit(){
			let param={
				type: 1,
				mobile:this.phoneNumber,
				code: this.code
			}

			let data = await postResponsesToken('account/user/updatePayPassword', param)

			if( data.code === 0) {
				navigator.push({
					'url': this.baseURL + 'views/my-account/setnewpassword.js',
					'animated': 'true'
				})
			} else {
				this.alert(data.msg)
			}
			
		},

		async takeCode() {
			let data = await customResponse({url:'code?' + serialize({mobile: this.phoneNumber, type: 0}),  type:'GET',  header:{"Content-Type": "application/json;charset=utf-8"}})

			
			if (data.code === 0) {
				this.disabled = false
				this.t = 60

				let auth_timetimer = setInterval(() => {
					this.t--;
					if (this.t <= 0) {
						this.disabled = true
						clearInterval(auth_timetimer);
					}

				}, 1000)

			} else {
				modal.toast({ message: data.msg })
			}
		},

		// async takeCode(){
		// 	if(this.timeflag === true){
		// 		clearInterval(this.checkTimer)

		// 		let data = await customResponse({url:'code?' + serialize({mobile: this.phoneNumber, type: 0}),  type:'GET',  header:{"Content-Type": "application/json;charset=utf-8"}})

		// 		this.t = 60
		// 		this.checkTimer = setInterval(() => {
		// 			if (this.t === 0) {
		// 				this.disabled = false
		// 				this.timeflag = true
		// 				clearInterval(this.checkTimer)
		// 				this.showtitle = '获取验证码'
		// 			} else {
		// 				this.timeflag = false
		// 				this.disabled = true
		// 				this.t--
		// 				this.showtitle = this.t  + 's后获取'
		// 			}
		// 		}, 1000)

		// 		// this.alert(data)
		// 	}
		// }
		
  }
};
</script>
<style scoped>
.findpassword {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f5f5f5;
}
.header {
  width: 750px;
  height: 90px;
  background-color: #fff;
  box-shadow: 0 4px 15px 0 rgba(229, 229, 229, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.header-img {
  position: absolute;
  left: 32px;
  top: 34px;
  margin-left: 0;
}
.code-input{
  height:80px;
}
.header-title {
  font-size: 34px;
  color: #fff;
  font-family: PingFangSC-Medium;
}
.header-img-right {
  position: absolute;
  right: 32px;
  top: 34px;
  margin-left: 0;
}
.title {
  margin-top: 24px;
  margin-bottom: 24px;
  padding-left: 32px;
}
.button_box {
  margin-top: 80px;
  padding-left: 32px;
  padding-right: 32px;
}
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 96px;
  background-color: #e70d0d;
  border-radius: 4px;
}
.phone{
    height: 112px;
    background-color: #FFFFFF;
    display: flex;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(245,245,245);
    flex-direction: row;
    align-items: center;
}
.phone_fl{
    width: 130px;
    padding-left: 32px;
    margin-right: 80px;
}
.code{
    height: 112px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.code_fl{
    width:130px;
    padding-left: 32px;
    margin-right: 80px;
}
.code_md{
    flex: 1.5;

}
.code_fr{
    flex: 1;

}
.codeBtn {
	width:200px;
	opacity: 1;
	padding-left:15px;
	border-left-width: 2px;
	border-left-style:solid;
	border-left-color: #333333;
	background-color:#fff;
	height: 40px;
	text-align: right;
	align-items: center;
	justify-content: center;
}

</style>